<script setup>
import { computed, ref } from 'vue';
import { useStudyRoomStore } from '@/stores/modules/study_room.js'
const studyRoomStore = useStudyRoomStore()

// 添加一个响应式变量来存储图片URL
const imageUrl = ref(null)

const triggerFileInput = () => {

}

const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader(); // 创建FileReader对象
    // 当文件读取完成时触发
    reader.onload = function(e) {
      // 获取图片的base64编码
      imageUrl.value = e.target.result;
      //大于5MB时，提示用户
      if (file.size > 5 * 1024 * 1024) {
        ElMessage.error('图片大小不能超过5MB！')
        return;
      }
    };
    // 开始读取文件内容为Data URL
    reader.readAsDataURL(file);
  } else {
    alert('请选择一张图片！');
  }
}

const preImg = computed(() => {

  // 如果imageUrl和本地存储的图片都没有，就是用默认的图片，返回空即可
  if (!imageUrl.value && !localStorage.getItem('background')) {
    return {};
  }
  // 如果有imageUrl，没有本地存储的图片，说明是第一次上传图片，返回imageUrl.value
  if (imageUrl.value && !localStorage.getItem('background')) {
    return {
      backgroundImage: `url(${imageUrl.value})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      backgroundRepeat: 'no-repeat'
    };
  }
  // 如果没imageUrl，有本地存储的图片，说明没修改图片，返回本地存储的图片
  if (!imageUrl.value && localStorage.getItem('background')) {
    return {
      backgroundImage: `url(${localStorage.getItem('background')})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      backgroundRepeat: 'no-repeat'
    };
  }
  // 如果imageUrl和本地存储的图片都有，就返回imageUrl.value
  return {
    backgroundImage: `url(${imageUrl.value})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat'
  };

});


const handleClick = (type) => {
  if(type === 0){
    studyRoomStore.isUpdateBackground=false;
  }else{
    studyRoomStore.isUpdateBackground=false;
    //图片本地存储
    localStorage.setItem('background', imageUrl.value);
    //刷新页面
    window.location.reload();
  }
}
</script>

<template>
<div class="content">
  <div class="update-background">
    <div class="title">修改自习室背景</div>

    <div class="preview">
      <div class="head">
        <img src="@/assets/icon/fourStar.png" alt="" class="icon">
        <div class="title2">预览</div>
      </div>
<!--   预览图片   -->
      <img alt="" class="preview-img" :style="preImg">
    </div>

    <div class="upload">
      <div class="head">
        <img src="@/assets/icon/fourStar.png" alt="" class="icon">
        <div class="title2">上传图片</div>
      </div>

      <div class="upload-container">

        <label for="file-upload" @click="triggerFileInput">
          <img src="@/assets/icon/upload.png" alt="" class="upload-img">
        </label>

        <input type="file" id="file-upload" style="display: none"  accept="image/*" @change="handleFileChange" />
      </div>
    </div>

    <div class="btn">
      <div class='no' @click="handleClick(0)">取消</div>
      <div class="yes" @click="handleClick(1)">确定</div>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
.content{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(90, 90, 90, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;

  .update-background{
    width: 540px;
    height: 500px;
    background: #fff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    gap: 10px;
    padding: 36px;
    .btn{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .no{
        width: 200px;
        height: 65px;
        background: #f4f5f9;
        border-radius: 20px;
        color: #333333;
        font-size: 19px;
        font-weight: 500;
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing: 2px;
        cursor: pointer;
      }
      .yes{
        width: 200px;
        height: 65px;
        background: #8488fd;
        border-radius: 20px;
        color: #fff;
        font-size: 19px;
        font-weight: 500;
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing: 2px;
        cursor: pointer;
      }
    }
    .upload{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      gap: 20px;
      .upload-container{
        width: 120px;
        height: 60px;
        background-color: #f2f3f7;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 60px;
        cursor: pointer;
        .upload-img{
          width: 30px;
          height: 27px;
          cursor: pointer;
        }
        #file-upload {
          display: none;
        }
      }
    }
    .preview{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      gap: 20px;
      .preview-img{
        background-image: url("@/assets/img/preview.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 300px;
        height: 160px;
      }
    }
    .head{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 15px;
      .icon{
        width: 24px;
        height: 24px;
      }
      .title2{
        font-size: 18px;
        font-weight: 500;
        color: #333333;
      }
    }
    .title{
      width: 100%;
      font-size: 20px;
      font-weight: bold;
      color: #333333;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
